<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">名称</label>
                <div class="common-search-conrol">
                    <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.name">
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">类型</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="请选择"
                        [(ngModel)]="queryForm.type">
                        <nz-option
                            *ngFor="let item of supplier_type"
                            nzValue="{{item.value}}"
                            nzLabel="{{item.label}}">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.state">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="0" nzLabel="草稿"></nz-option>
                        <nz-option nzValue="1" nzLabel="正常"></nz-option>
                        <nz-option nzValue="2" nzLabel="冻结"></nz-option>
                        <nz-option nzValue="3" nzLabel="合作结束"></nz-option>
                        <nz-option nzValue="4" nzLabel="合同过期"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <button nz-button nzType="primary" class="m-r-8" (click)="query()" *ngIf="permission.userPermission.has('stock:sqe:add')">查询</button>
                <button nz-button nzType="default" (click)="backList()" *ngIf="permission.userPermission.has('stock:sqe:add')">重置</button>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="m-t-2">
    <div class="operation-wrap p-b-10">
        <button nz-button nzType="primary" [routerLink]="['../sqeAdd', 0]">新增供应商</button>
    </div>

    <div class="pagination-wrap-position table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
            >
            <thead>
                <tr>
                    <th nzAlign="center">ID</th>
                    <th nzAlign="center">名称</th>
                    <th nzAlign="center">联系人</th>
                    <th nzAlign="center">联系电话</th>
                    <th nzAlign="center">附件</th>
                    <th nzAlign="center">合同失效日期</th>
                    <th nzAlign="center">供应商类型</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center" nzWidth="200px">操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <td nzAlign="center">{{ data.id }}</td>
                    <td nzAlign="center">{{ data.abbreviation }}</td>
                    <td nzAlign="center">{{ data.contacts ? data.contacts  : '-'}}</td>
                    <td nzAlign="center">{{ data.phoneNumber ? data.phoneNumber : '-' }}</td>
                    <td nzAlign="center">{{ data.contractEnclosure ? data.contractEnclosure.split(',').length + ' 项' : '-' }}</td>
                    <td nzAlign="center">
                        <span *ngIf="!flagTime(data.endTime)">{{ data.endTime ? data.endTime : '-' }}</span>
                        <span *ngIf="flagTime(data.endTime)" style="color: orange;">{{ data.endTime }}</span>
                    </td>
                    <td nzAlign="center">
                        {{ type_To_text(data.type) }}
                    </td>
                    <td nzAlign="center" class="{{data.state == 1 ? 'font_Green'  : data.state == 2 ? 'font_Yellow' : data.state == 3 ? 'font_Gray' : 'font_Black'}}">
                        {{ state_To_text(data.state) }}
                    </td>
                    <td nzAlign="center">
                        <a nz-button nzType="link" [routerLink]="['../sqeAdd', data.id]" *ngIf="permission.userPermission.has('stock:sqe:edit')">编辑</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>
